<template>
    <div>
        <div>
            <homenav :flag="3"></homenav>
        </div>
        <div class="usercenterContainer">
            <div class="userinfos">
                <div class="userinfosInner">
                    <div class="uploadContainer">
                        <el-upload
                            class="upload-demo"
                            ref="upload"
                            action
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :on-change="uploadChanged"
                            :file-list="fileList"
                            :auto-upload="false"
                        >
                            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                            <el-button
                                style="margin-left: 10px;"
                                size="small"
                                type="success"
                                @click="submitUpload"
                            >上传到服务器</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>
                    </div>
                    <el-image fit="cover" style="width:100%;height:250px;" :src="useravatar.avatar">
                        <div slot="error" class="image-slot">
                            <i class="el-icon-picture-outline"></i>
                        </div>
                    </el-image>
                </div>
                <div class="userinfosInner">
                    <div>
                        <b>用户名:</b>
                        <span>{{userInfos.username}}</span>
                    </div>
                    <div>
                        <b>邮箱:</b>
                        <span>{{userInfos.email}}</span>
                    </div>
                    <div>
                        <b>电话:</b>
                        <span>{{userInfos.mobile}}</span>
                    </div>
                    <div>
                        <b>最后登录时间:</b>
                        <span>{{userInfos.last_login | timeF}}</span>
                    </div>
                </div>
                <div class="userinfosInner">
                    <div>
                        <el-link @click="changedUserInfos">修改基本信息</el-link>
                    </div>
                    <div>
                        <el-link @click="manageDeliveraddress">收货地址管理</el-link>
                    </div>
                </div>
            </div>
            <div class="useropera">
                <div class="componentNavContainer">
                    <div
                        @click="changeComponent(item,index)"
                        v-for="(item, index) in componentNavData"
                        :key="index"
                        :class="item.color?'green':''"
                    >{{item.name}}</div>
                </div>
                <div class="componentsContainer">
                    <transition mode="out-in">
                        <component :is="selectComponent"></component>
                    </transition>
                </div>
            </div>
        </div>

        <!-- 收货地址操作弹出框 -->
        <el-dialog title="用户收货地址列表" :visible.sync="centerDialogVisible" width="60%" center>
            <div class="dialogContent">
                <el-table ref="filterTable" :data="tableData" checkbox style="width: 100%">
                    <el-table-column
                        prop="contactname"
                        label="收货人"
                        sortable
                        width="180"
                        column-key="date"
                    ></el-table-column>
                    <el-table-column prop="mobile" label="联系电话" width="180"></el-table-column>
                    <el-table-column prop="address" label="收货地址"></el-table-column>
                    <el-table-column prop="title" label="标签" width="100">
                        <template slot-scope="scope">
                            <el-tag
                                :type="scope.row.tag === '家' ? 'primary' : 'success'"
                                disable-transitions
                            >{{scope.row.title}}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="tag" label="操作" width="150">
                        <template slot-scope="scope">
                            <!-- <el-button
                                @click="chioseAddressForOrder(scope.row,scope.$index)"
                                size="mini"
                                type="primary"
                            >选择</el-button>-->
                            <el-button
                                @click="removeAddress(scope.row,scope.$index)"
                                size="mini"
                                type="danger"
                            >删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addAddress" icon="el-icon-plus">添加地址</el-button>
            </span>
            <!-- 内层dialog--添加收货地址 -->
            <el-dialog
                width="50%"
                title="添加收货地址"
                :visible.sync="innerVisible"
                append-to-body
                center
            >
                <div class="addadressContainer">
                    <el-form label-width="80px" :model="addForm">
                        <el-form-item label="收货人">
                            <el-input v-model="addForm.contactname"></el-input>
                        </el-form-item>
                        <el-form-item label="联系电话">
                            <el-input v-model="addForm.mobile"></el-input>
                        </el-form-item>
                        <el-form-item label="收货地址">
                            <el-input v-model="addForm.address"></el-input>
                        </el-form-item>
                        <el-form-item label="标签">
                            <el-input v-model="addForm.title"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button
                        size="small"
                        type="danger"
                        @click="innerVisible=false"
                        icon="el-icon-close"
                    >取消</el-button>
                    <el-button
                        size="small"
                        type="primary"
                        @click="ComfirmAddAddress"
                        icon="el-icon-check"
                    >保存</el-button>
                </span>
            </el-dialog>
        </el-dialog>

        <!-- 修改基本信息弹框 -->
        <el-dialog title="修改用户基本信息" :visible.sync="changeUserInfos" width="30%" center>
            <div class="changeinfosdialogcontent">
                <el-form label-width="80px" :model="userInfos">
                    <el-form-item label="昵称">
                        <el-input v-model="userInfos.username"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话">
                        <el-input v-model="userInfos.mobile"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱">
                        <el-input v-model="userInfos.email"></el-input>
                    </el-form-item>
                    <el-form-item label="年龄">
                        <el-input v-model="userInfos.age"></el-input>
                    </el-form-item>
                    <el-form-item label="创建时间">
                        <span>{{userInfos.date_joined | timeF}}</span>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="changeUserInfos = false" type="danger" icon="el-icon-close">取 消</el-button>
                <el-button @click="saveChangedUserInfos" type="primary" icon="el-icon-check">确认修改</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import userfav from "./userfav.vue";
import userorder from "./userorder.vue";
import usershopcar from "./usershopcar.vue";
import homenav from "../common/homenav.vue";
export default {
    data() {
        return {
            selectComponent: "",
            componentNavData: [
                { name: "我的收藏", id: 1, color: false },
                { name: "我的购物车", id: 2, color: false },
                { name: "我的订单", id: 3, color: true }
            ],
            userInfos: {},
            fileList: [],
            selectFile: null,
            useravatar: {},
            centerDialogVisible: false,
            innerVisible: false,
            changeUserInfos: false,
            tableData: [],
            addForm: {
                contactname: null,
                mobile: null,
                address: null,
                title: null
            }
        };
    },
    methods: {
        getUser() {
            this.$ajax
                .get("user/")
                .then(res => {
                    this.$store.commit("updateUserInfos", res.data);
                    this.userInfos = this.$store.state.userInfos;
                })
                .catch(err => {
                    window.localStorage.removeItem("token");
                });
        },
        changeComponent(item, index) {
            this.componentNavData.forEach(items => {
                if (item.id == items.id) {
                    items.color = true;
                } else {
                    items.color = false;
                }
            });
            if (item.id == 1) {
                this.selectComponent = userfav;
            } else if (item.id == 2) {
                this.selectComponent = usershopcar;
            } else {
                this.selectComponent = userorder;
            }
        },
        // 上传用户头像
        submitUpload() {
            let form = new FormData();
            form.append("avatar", this.selectFile);
            this.$ajax.post("avatar/", form).then(res => {
                //console.log(res.data);
                this.useravatar = res.data;
                window.reload();
            });
        },
        handleRemove(file, fileList) {
            //console.log(file, fileList);
        },
        handlePreview(file) {
            //console.log(file);
        },
        // 文件选择放生改变
        uploadChanged(file, fileList) {
            this.selectFile = file.raw;
        },
        // 管理收货地址
        manageDeliveraddress() {
            this.centerDialogVisible = true;
        },
        // 删除收货地址
        removeAddress(row, index) {
            this.$ajax
                .delete("useraddress/" + row.id)
                .then(res => {
                    //console.log(res.data);
                    this.tableData.splice(index, 1);
                    this.$store.commit("updateUserAddress", this.tableData);
                })
                .catch(err => {
                    console.log("remove--address -- error");
                });
        },
        // 添加收货地址
        addAddress() {
            this.innerVisible = true;
        },
        // 确认添加收货地址
        ComfirmAddAddress() {
            if (
                !this.addForm.contactname ||
                !this.addForm.mobile ||
                !this.addForm.address ||
                !this.addForm.title
            ) {
                this.$message({
                    message: "亲补全信息哦!",
                    type: "warning"
                });
            } else {
                this.$ajax
                    .post("useraddress/", this.addForm)
                    .then(res => {
                        //console.log(res.data);
                        this.tableData.push(res.data);
                        this.$store.commit("updateUserAddress", this.tableData);
                        this.$message({
                            message: "添加成功!",
                            type: "success"
                        });
                        this.innerVisible = false;
                    })
                    .catch(err => {
                        console.log("add-address -- error");
                    });
            }
        },
        // 点击用户中心的修改用户信息
        changedUserInfos() {
            this.changeUserInfos = true;
            //console.log(this.userInfos);
        },
        // 确认修改用户基本信息
        saveChangedUserInfos() {
            let id = this.userInfos.id;
            let phoneReg = /^1[3-578]\d{9}$/;
            if (
                this.userInfos.username != null &&
                this.userInfos.username != ""
            ) {
                if (
                    this.userInfos.mobile != null &&
                    this.userInfos.mobile != ""
                ) {
                    if (phoneReg.test(this.userInfos.mobile)) {
                        this.$ajax
                            .put("user/" + id + "/", this.userInfos)
                            .then(res => {
                                //console.log(res.data);
                                this.$message({
                                    message: "操作成功!",
                                    type: "success"
                                });
                                this.changeUserInfos = false;
                            })
                            .catch(err => {
                                console.log("update--userinfos --error");
                            });
                    } else {
                        this.$notify({
                            message: "请输入正确的手机号",
                            type: "warning"
                        });
                    }
                } else {
                    this.$notify({
                        message: "联系电话不能为空",
                        type: "warning"
                    });
                }
            } else {
                this.$notify({
                    message: "用户名不能为空",
                    type: "warning"
                });
            }
        }
    },
    components: {
        userfav,
        userorder,
        usershopcar,
        homenav
    },
    mounted() {
        this.selectComponent = userorder;
        this.tableData = this.$store.getters.getUserAddress;
    }, // 页面元素加载完毕
    created() {
        // Vue实例初始化完成执行
        this.getUser();
        this.$ajax.get("avatar/").then(res => {
            console.log(res.data);
            if(res.data.results.length>0){
                this.useravatar = res.data.results.pop();
            }else{
                this.$notify({
                    title:"还没上传用户头像哦~",
                    message:"鼠标移入头像区域可上传哦！",
                    type:"info"
                })
            }
            
        });
    }
};
</script>


<style lang="scss" scoped>
.v-enter {
    opacity: 0;
    transform: translateX(10%);
}

.v-leave-to {
    opacity: 0;
    transform: translateX(-10%);
}

.v-enter-active,
.v-leave-active {
    transition: all 0.3s ease;
}

.green {
    background-color: #85ce61;
}

.usercenterContainer {
    padding-top: 125px;
    margin: 15px auto;
    width: 75%;
    padding-left: 15px;
    padding-bottom: 15px;
    min-width: 1095px;
    display: flex;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    .userinfos {
        width: 22%;
        height: auto;
        
        // border: 1px solid red;
        .userinfosInner:nth-child(1) {
            width: 100%;
            min-height: 250px;
            // background-color: #ccc;
            position: relative;
            // border: 1px solid orange;
            .uploadContainer {
                position: absolute;
                height: 120px;
                width: 100%;
                z-index: 999;
                transition: all linear 0.3s;
                opacity: 0;
            }
        }
        .userinfosInner:nth-child(1):hover {
            .uploadContainer {
                opacity: 1;
            }
        }
        .userinfosInner:nth-child(2) {
            width: 100%;
            // border: 1px solid orange;
            div {
                margin-top: 8px;
                b {
                    font-size: 13px;
                    opacity: 0.8;
                }
                span {
                    font-size: 14px;
                    color: #ccc;
                }
            }
        }
        .userinfosInner:nth-child(3) {
            width: 100%;
            // border: 1px solid orange;
            margin-top: 10px;
            div {
                margin-top: 5px;
            }
        }
    }
    .useropera {
        width: 78%;
        height: 100%;
        .componentNavContainer {
            display: flex;
            justify-content: space-around;

            div {
                opacity: 0.5;
                width: 33.333%;
                height: 75px;
                border: 1px solid #ccc;
                border-radius: 4px;
                text-align: center;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }
            div:hover {
                opacity: 1;
            }
        }
    }
}
</style>